<template>
	
  <view class="my-page">
	  <!-- #ifdef APP||H5 -->
	
			<!-- 未登录 -->
		  <view v-if="!isLogin">
			  <!-- 头像部分 -->
			  <view class="avatar-container">
					 <image @click="navToLogin" v-if="!isLogin" style="width: 50px;height: 50px;border-radius: 50%;"  src="@/static/default_avatar.png" ></image>
			  </view>
			  <!-- 用户昵称部分 -->
			  <view class="nickname-container">
			  			<text v-if="!isLogin">点击登录</text>
			  			
			  </view>
		  </view>
		  <!-- 已登录 -->
		  <view v-else>
		  			  <!-- 头像部分 -->
		  			  <view class="avatar-container">
		  					
		  					 <image v-if="user.userAvatar==='default'"  style="width: 50px;height: 50px;border-radius: 50%;"  src="@/static/default_avatar.png" ></image>
		  			  		<image v-else :src="user.userAvatar" mode="aspectFill" class="avatar"></image>
		  			  </view>
		  			  <!-- 用户昵称部分 -->
		  			  <view class="nickname-container">
		  			  			<text  class="nickname">{{ user.userName }}</text>
		  			  </view>
					  <br>
					 <uni-list>
					 	<uni-list-item title="关于" link="true" to="/pages/about/about" ></uni-list-item>
					 	
					 </uni-list>
						<u-button type="error" @click="logout()">退出登录</u-button>
						

		  </view>
		  
	  <!-- #endif -->
    
  </view>
</template>

<script>

import * as jsrsasign from 'utils/jsrsasign.js'
export default {
  data() {
    return {
		user:{
			userName:'default',
			userAvatar:''
		},
		isLogin:false
    };
  },
  methods:{
	  onClick(){
		  uni.showToast({
		  	title:"click"
		  })
	  },
	  logout(){
		uni.setStorage({
			key:"token",
			data:""
		})
		this.isLogin=false
	  },
	 checkIsLogin(){
		 var token=uni.getStorageSync('token')
		
		 if(token!==''&&token!==null){
			 this.isLogin=true;
			 this.user.userName=jsrsasign.getUsernameFromToken(token)
			 this.user.userAvatar=jsrsasign.getUserAvatarURLFromToken(token)
			 
		} 
		 
	 },
	 navToLogin(){
		 uni.navigateTo({
		 	url:"/pages/login/login",
			success: (res) => {
				
			},
			fail: (err) => {
				console.log(err)
			}
		 })
	 }
  },
 
   mounted() {
	   // 监听 userLoggedIn 事件
	           uni.$on('userLoggedIn', (username) => {
				  this.isLogin=true
				  console.log("返回到my")
				  setTimeout(() => {
				         this.checkIsLogin()
				 }, 200);
	          });
  	this.checkIsLogin()
  } 
};
</script>

<style scoped>
.my-page {
  padding-top: 50px;
  text-align: center;
}

.avatar-container {
  margin-bottom: 20px;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.nickname-container {
  font-size: 20px;
  font-weight: bold;
}

.nickname {
  color: #333;
}
</style>    